<template>
	<view class="container">
		<u-tabs class="container__tab u-margin-left-20 u-margin-right-20" :list="tabList" name="item_name"
			:is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="container__content u-margin-20">
			<view class="flex statistic__date container__title">
				<view class="statistic__date-text u-padding-20" @click="pickerVisable=true">{{date}}</view>

				<u-icon name="arrow-down" size="30"></u-icon>
			</view>
			<view class="flex u-margin-20 align-center  u-padding-20" v-for="(item,index) in itemList" :key="index">
				<view class="" v-if="index==0">
					<u-image width="60rpx" height="60rpx" src="/static/image/home/icon_rank_first.png"></u-image>
				</view>
				<view class="" v-else-if="index==1">
					<u-image width="60rpx" height="60rpx" src="/static/image/home/icon_rank_sencond.png"></u-image>
				</view>
				<view class="" v-else-if="index==2">
					<u-image width="60rpx" height="60rpx" src="/static/image/home/icon_rank_third.png"></u-image>
				</view>
				<view class="" v-else>
					<u-image width="60rpx" height="60rpx" src="/static/image/home/icon_rank_other.png"></u-image>
				</view>
				<view class="flex-1 u-margin-left-10">
					<view class="">
						{{item.agentName}}
					</view>
					<view class="">
						{{item.mobileNo.substring(0,3)+'****'+item.mobileNo.substring(item.mobileNo.length
							- 4)}}
					</view>
				</view>
				<view class="theme u-font-15 ">
					{{item.statData}}
				</view>
			</view>
		</view>

		<term-picker :visable.sync="pickerVisable" :defaultDate="defaultDay" :maxDay="maxDay" @confirm="confirmByDay">
		</term-picker>
	</view>
</template>
<script>
	import termPicker from '../components/rank-term-picker.vue';
	export default {
		components: {

			termPicker
		},
		data() {
			return {

				tabList: [{
					item_name: '交易量',
					value: 'TRANS_AMOUNT' //TRANS_AMOUNT

				}, {
					item_name: '交易笔数',
					value: 'TRANS_COUNT' //TRANS_COUNT
				}, {
					item_name: '终端总数',
					value: 'SN_COUNT' //SN_COUNT

				}, {
					item_name: '终端绑定', //SN_BING
					value: 'SN_BING'
				}, {
					item_name: '终端激活', //SN_ACTIVE
					value: 'SN_ACTIVE'
				}],
				current: 0,

				searchParams: {
					"statType": "TRANS_AMOUNT", //list value
					"startDate": "", //1 传这个
					"endDate": "", //1 传这个
					"dateType": "2",
					"monthDate": "", //2 传这个

				},
				pageNo: 1,
				pageSize: "10",
				itemList: [],
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				date: "2024年",

				year: "",
				month: "",
				day: "",
				pickerVisable: false, //是否日期选择控件
				defaultDay: [], //日期默认选择，为空则是当前日期
				maxDay: 30, //最大跨度日
			}
		},
		onReachBottom() {
			this.onScrolltolower();
		},
		mounted() {
			this.date = this.traversalTime(new Date().getTime());
			this.searchParams.monthDate = this.date;
			let date = this.year + "-" + this.month + "-" + this.day;
			this.searchParams.startDate = date;
			this.searchParams.endDate = date;
			this.getList();
		},
		methods: {
			confirm(e) {
				this.date = e.year + "年" + e.month + "月";
				this.searchParams.monthDate = e.year + "-" + e.month;
				this.refreshData();
			},
			change(index) {
				this.current = index;
				this.searchParams.statType = this.tabList[index].value;
				this.refreshData();
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			onScrolltolower() {
				this.status = "loading";
				this.getList();
			},
			getList() {
				const _that = this;
				this.$zx.user_api.agentTopData(this.pageNo, this.pageSize, this.searchParams).then((data) => {

					console.log("data=" + JSON.stringify(data))
					_that.itemList = _that.itemList.concat(data.agentTopDataList);
					// console.log("data=" + JSON.stringify(_that.terminalList))
					if (data.length !== 0) {
						this.status = "loadmore";
						this.pageNo += 1;
					} else {
						this.status = "nomore";
					}
				});
			},
			traversalTime(timestamp) {
				//timestamp(时间戳)是整数，否则要parseInt转换
				let time = new Date(timestamp);
				let y = time.getFullYear();
				let m = time.getMonth() + 1;
				let d = time.getDate();
				let h = time.getHours();
				let mm = time.getMinutes();
				let s = time.getSeconds();
				this.year = y;
				this.month = this.addTimes(m);
				this.day = this.addTimes(d);
				return y + '-' + this.addTimes(m);
			},
			addTimes(m) {
				return m < 10 ? '0' + m : m
			},

			confirmByDay(date) {
				console.log("date=" + JSON.stringify(date))
				if (date.type == "1") {
					this.date = date.data[0];
					this.searchParams.dateType = "2";
					this.searchParams.monthDate = this.date;
				} else {
					this.date = date.data[0] + "至" + date.data[1];
					this.searchParams.dateType = "1";

					this.searchParams.startDate = date.data[0];
					this.searchParams.endDate = date.data[1];
				}

				this.refreshData();

			},
			refreshData() {
				this.pageNo = "1";
				this.itemList = [];
				this.getList();
			}
		}
	}
</script>
<style scoped lang="scss">
	.container {
		background-color: white;
		height: 100vh;

		&__tab {
			background-color: #f6f6f6 !important;
			border-radius: 20rpx;
		}

		&__content {
			border-radius: 20rpx;
			background-color: white;
			border: 1px solid #f6f6f6;
		}

		&__title {
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			background-color: #f6f6f6;
		}
	}
</style>